<template>
  <div>
    <div id="myChart" :style="{ width: '500px', height: '300px' }"></div>
    <div id="main"></div>
  </div>
</template>
  <script>
  import * as echarts from 'echarts'
  import axios from 'axios'
  export default {
    name: 'Echarts',
    data() {
      return {
        tabledate: []
      }
    },
    // created(){
  
    // },
    mounted() {
      axios.get("/api/getEcharts", {
      }).then(res => {
        this.tabledate = res.data
        // console.log(this.tabledate[0].value)
        let echarts = require('echarts')
        let myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '各品牌销量统计',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#555555'
            }
          },
          tooltip: {},
          xAxis: {
            data: [
              "浪琴",
              "江诗丹顿",
              "欧米茄",
              "卡地亚",
              "劳力士",
              "天梭"
            ]
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [
              {
                value: this.tabledate[0].value,
                itemStyle: {
                  color: "#3fb1e3"
                }
              },
              {
                value: this.tabledate[1].value,
                itemStyle: {
                  color: "#c4ebad"
                }
              },
              {
                value: this.tabledate[2].value,
                itemStyle: {
                  color: "#c4ebad"
                }
              },
              {
                value: this.tabledate[3].value,
                itemStyle: {
                  color: "#6be6c1"
                }
              },
              {
                value: this.tabledate[4].value,
                itemStyle: {
                  color: "#3fb1e3"
                }
              },
              {
                value: this.tabledate[5].value,
                itemStyle: {
                  color: "#c4ebad"
                }
              }
            ]
          }]
        });
      })
      // 基于准备好的dom，初始化echarts实例
  
  
    }
  }
  </script>